<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Affix 固钉</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-btn{
	margin-left: 20px;
}
#components-affix-demo-target.scrollable-container {
	height: 100px;
	overflow-y: scroll;
}

#components-affix-demo-target .background {
	padding-top: 60px;
	height: 300px;
	background-image: url('../static/img/msk.jpg');
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-affix :offset-top="top1">
		<a-button type="primary" @click="top1 += 10">Affix top</a-button>
	</a-affix>
	<br />
	<a-affix :offset-bottom="bottom1">
		<a-button type="primary" @click="bottom1 += 10">Affix bottom</a-button>
	</a-affix>
	
	<a-divider class="a-divi" orientation="left">滚动容器</a-divider><!-- =============================================================== -->
	<p class="desc">用 target 设置 Affix 需要监听其滚动事件的元素，默认为 window。</p>
	<div id="components-affix-demo-target" ref="containerRef2" class="scrollable-container">
		<div class="background">
			<a-affix :offset-top="top2" :target="() => get_dom_ref">
				<a-button type="primary">Fixed at the top of container</a-button>
			</a-affix>
		</div>
	</div>
	
	<a-divider class="a-divi" orientation="left">固定状态改变的回调</a-divider><!-- =============================================================== -->
	<p class="desc">可以获得是否固定的状态。</p>
	<a-affix :offset-top="120" @change="statusChange">
		<a-button>120px to affix top</a-button>
	</a-affix>
	
	<a-divider class="a-divi" orientation="left">绝对定位</a-divider><!-- =============================================================== -->
	<p class="desc">注意：Affix 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 Affix 为绝对定位。</p>
	<a-affix style="position: absolute;top: 300px;left: 500px;">
		<a-button>绝对定位效果</a-button>
	</a-affix>
	
</div>
<div class="h1000"></div>

</body>
<script>
const Main = {
data() {
	return {
		top1: 10,
		top1: 10,
		bottom1: 10,
		
		top2: 10,
		get_dom_ref: null,
		containerRef2: null,
		
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		console.log("仅在整个视图都被渲染之后才会运行的代码");
		// console.log(this.$refs.containerRef2);
		// this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		this.get_dom_ref = this.$refs.containerRef2;
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	// getDomRef(){
	// 	return function(){
	// 		console.log(this);
	// 		console.log(this.$refs);
	// 		return this.$refs.containerRef2;
	// 	}
	// },
	
},
methods:{
	statusChange(affixed){
		console.log(affixed);
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
